import React, { Component } from 'react'
import { ListItem, ListInfo, LoadMore } from './style'
import { connect } from 'react-redux'
import { actionCreators } from '../store'
import { Link } from 'react-router-dom'

class List extends Component {
  render() {
    let { list, getMoreList, articlePage } = this.props

    return (
      <>
        {list.map((item, index) => (
          <Link key={index} to={'/detail?id=' + item.get('id')}>
            <ListItem key={item.get('id')}>
              <ListInfo>
                <h3 className="title">{item.get('title')}</h3>
                <p className="desc">{item.get('desc')}</p>
              </ListInfo>
              <img src={item.get('imgUrl')} className="pic" alt="pic" />
            </ListItem>
          </Link>
        ))}
        <LoadMore onClick={() => getMoreList(articlePage)}>更多文字</LoadMore>
      </>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    list: state.getIn(['home', 'articleList']),
    articlePage: state.getIn(['home', 'articlePage']),
  }
}
const { getMoreList } = actionCreators
const mapDispatchToProps = { getMoreList }
export default connect(mapStateToProps, mapDispatchToProps)(List)
